<template>
  <div class="boardChat">
    <div class="chatList">
      <div class="chatItem" v-for="(item, index) in gamestatus.chat" :key="index">
        <div v-if="item.userId === userStore.user.userId" class="me">
          <div>
            <span>
              {{ item.msg }}
            </span>
          </div>
        </div>
        <div v-else class="you">
          <div>
            <span>
              {{ item.msg }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="chatInput">
      <input type="text" v-model="inputMsg" placeholder="请输入消息" @change="sendMsg"/>
      <button @click="sendMsg">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

import useGamestatus from "../stores/game";
import { useUserStore } from "../stores/user";

const gamestatus = useGamestatus();
let userStore = useUserStore();

let inputMsg = ref("");

function sendMsg() {
  if (inputMsg.value.trim() === "") {
    return;
  }
  gamestatus.socket.emit("chat", { roomId: gamestatus.myRoomId, userId: userStore.user.userId, msg: inputMsg.value });
  inputMsg.value = "";
}
</script>
<style scoped>
.boardChat {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 16px;
  /* background: linear-gradient(135deg, rgba(239, 255, 185, 0.408) 0%, #e7ebf0 100%); */

  & > .chatList {
    flex: 9;
    border: none;
    border-radius: 12px;
    padding: 16px;
    overflow-y: auto;
    margin-bottom: 12px;
    /* background-color: rgb(0, 0, 0); */
    backdrop-filter: blur(4px);
    scrollbar-width: thin;
    scrollbar-color: #4DB6AC white;
    & > .chatItem {
      display: flex;
      flex-direction: column;

      & > .me {
        display: flex;
        justify-content: flex-end;
        text-align: left;
        & > div {
          max-width: 80%;
          width: fit-content;
          border-radius: 15px;
          padding: 8px;
          margin-bottom: 8px;
          background: #dcf8c6;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
          word-wrap: break-word;
          overflow-wrap: break-word;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            top: 10px;
            right: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid #dcf8c6;
            align-self: flex-end;
          }
        }
      }
      & > .you {
        display: flex;
        justify-content: flex-start;
        text-align: left;
        & > div {
          max-width: 80%;
          width: fit-content;
          height: fit-content;
          border-radius: 15px;
          padding: 8px;
          margin-bottom: 8px;
          background: rgb(255, 255, 255);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
          word-wrap: break-word;
          overflow-wrap: break-word;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            top: 10px;
            left: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-right: 8px solid rgb(255, 255, 255);
            border-bottom: 8px solid transparent;
          }
        }
      }
    }
  }

  & > .chatInput {
    flex: 1;
    border: none;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background: #fff9e6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);

    & > input {
      flex: 8;
      border: none;
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 14px;
      outline: none;
      background: rgb(255, 255, 255);
      transition: all 0.3s ease;

      &:focus {
        background: white;
        box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.5);
      }
    }

    & > button {
      flex: 2;
      margin-left: 16px;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, rgb(60, 172, 241) 0%, rgb(0, 166, 255) 100%);

      color: white;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      &:hover {
        background: linear-gradient(135deg, rgb(173, 187, 244) 0%, rgb(54, 84, 237) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
